Example 6 - Fetch geometries

This example builds on top of the previous example and shows how to fetch geometries from the viewer objects.

Reference: Example 6 - Fetch geometries

Key Features

Hooks & Stores in the Viewer

• useObjects: Provides access to objects in the viewer. Documentation
• useViews: Manages views in the viewer. Documentation
• useViewId: Retrieves the current view ID.

Utils

• ViewerObjectUtils.getGeometryForViewerObject: Fetches geometry for a specific viewer object.
• useAsync: A React hook for handling asynchronous operations.
• SyncViews: Synchronizes views between multiple viewports.

---

Code Example

Below is an example implementation that demonstrates how to fetch geometries from viewer objects and display them in a synchronized multi-viewport setup.

import { Stack } from "@mui/system";
import { useRef } from "react";
import { useAsync } from "react-use";
import type { Mesh } from "three";

import { PlySample } from "../../data/scans";
import { useViewId } from "../../helpers/ViewContext";
import { ViewerObjectUtils } from "../../helpers/ViewerObjectUtils";
import { ScanCoordinateSystem } from "../../scene/helpers/ScanCoordinateSystem";
import { SyncViews } from "../../scene/helpers/SyncViews";
import { useObjects } from "../../stores/useObjects";
import { useViews } from "../../stores/useViews";
import { Viewport } from "../../ui/Viewport";
import { Viewer } from "../../Viewer";
import { PerspectiveView } from "../../views/PerspectiveView";

const factoryPath = PlySample["FACTORY"].url;

export function GeometryLoadExample() {
  const meshRef = useRef<Mesh>(null!);
  const viewId = useViewId();

  const obj = useObjects((s) => s.objects["example"]);

  const geometry = useAsync(async () => {
    if (!obj) return null;

    setTimeout(() => {
      const view = useViews.getState().views[viewId];
      view?.recenter?.();
    }, 100);

    return ViewerObjectUtils.getGeometryForViewerObject(obj);
  }, [obj]);

  if (viewId === "3d") return null;

  if (!geometry.value) return null;

  return (
    <ScanCoordinateSystem>
      <mesh ref={meshRef} geometry={geometry.value}>
        <meshStandardMaterial color="orange" transparent opacity={0.5} />
      </mesh>
    </ScanCoordinateSystem>
  );
}

function App() {
  return (
    <Viewer
      sx={{
        background: "transparent",
        position: "absolute",
        inset: 0,
        zIndex: 0,
      }}
      sceneExtension={
        <>
          <GeometryLoadExample />
          <SyncViews views={["3d", "3d-2"]} />
        </>
      }
      objects={{
        example: {
          url: factoryPath,
          excludeInViews: ["3d-2"],
        },
      }}
    >
      <Stack sx={{ width: "100%", height: "100%", flexDirection: "row" }}>
        <Viewport props={{}} name={"3d"} component={PerspectiveView} />
        <Viewport props={{}} name={"3d-2"} component={PerspectiveView} />
      </Stack>
    </Viewer>
  );
}

export default App;

---

This example demonstrates how to:

1. Fetch geometries for viewer objects using ViewerObjectUtils.getGeometryForViewerObject.
2. Use useAsync to handle asynchronous operations.
3. Synchronize views between two viewports using SyncViews.

Feel free to experiment with the code and adapt it to your specific use case!